<template>
<div class="handle-config">
  <div class="title">指派方式</div>
  <el-select v-model="form.assignType" @change="changeAssignType" placeholder="请选择" class="width-full">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

   <template v-if="form.assignType === 1">
    <div class="title">选择处理人</div>
    <el-select v-model="form.assignInfo" filterable placeholder="请选择" class="width-full">
    <el-option
      v-for="item in userList"
      :key="item._id"
      :label="item.agentName + ' 【' + item.agentNumber + '】'"
      :value="item._id">
    </el-option>
    </el-select>
  </template>

  <template v-if="form.assignType === 0">
    <div class="title">选择字段</div>
    <el-select v-model="form.assignInfo" @change="changeField" placeholder="请选择" class="width-full">
    <el-option
      v-for="item in memberFields"
      :key="item.businessId"
      :label="item.name"
      :value="item.businessId">
    </el-option>
    </el-select>
  </template>

  <div v-if="form.assignType === 2" class="node">
    <div class="title">选择节点
     <el-tooltip popper-class="config-tooltip" effect="dark" placement="right-end">
      <div slot="content">支持选择多个人工任务节点，若选择多个，则会按顺序查询对应节点的实际处理人进行指派，若第一个节点无实际处理人，则跳过查询下一节点，以此类推</div>
      <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
    </el-tooltip>
    </div>
    <el-select v-model="form.flowActivities" multiple placeholder="请选择" class="width-full">
      <el-option
        v-for="item in task"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <div class="tip">若上述节点均无实际处理人，则指派给</div>
    <el-select v-model="form.defaultAssignee" filterable placeholder="请选择" class="width-full">
    <el-option
      v-for="item in userList"
      :key="item._id"
      :label="item.agentName + ' 【' + item.agentNumber + '】'"
      :value="item._id">
    </el-option>
    </el-select>
  </div>

  <template v-if="form.assignType === 3">
    <el-radio-group v-model="form.autoAssignType" size="small" class="margin-t-10">
      <el-radio :label="0">轮询
          <el-tooltip popper-class="config-tooltip" effect="dark" placement="right-end">
            <div slot="content">按照一定顺序自动轮流分配给指派范围内的人</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
          </el-tooltip>
      </el-radio>
      <el-radio :label="1">负载均衡
         <el-tooltip popper-class="config-tooltip" effect="dark" placement="right-end">
          <div slot="content">优先分配给当前待办最少的人</div>
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
         </el-tooltip>
      </el-radio>
    </el-radio-group>

    <div class="title">指派范围</div>
    <optionalRadioScope
      :isCheckbox="false"
      :tabs="tabs"
      @changeFlowType="changeFlowType"
      @changeValue="changeValue"
      :value="form.assignInfo">
    </optionalRadioScope>

    <div class="title">指派要求</div>
    <el-radio-group v-model="form.autoAssignCon" size="small" class="margin-t-10">
      <el-radio :label="0">不根据状态
          <el-tooltip popper-class="config-tooltip" effect="dark" placement="right-end">
            <div slot="content">不以接单状态做分配，强制分配</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
          </el-tooltip>
      </el-radio>
      <el-radio :label="1">根据状态
         <el-tooltip popper-class="config-tooltip" effect="dark" placement="right-end">
          <div slot="content">根据是否可自动接单状态做分配，只分配给可以接受自动接单的，并当前待办没有超过上限的成员</div>
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-20"></i>
         </el-tooltip>
      </el-radio>
    </el-radio-group>
  </template>

  <div class="title">处理人按钮</div>
  <draggable :list="form.dealerButton" handle=".move"  animation="150" @end="moveEnd"
        @drop.native.stop.prevent="">
    <div class="page-item" v-for="(item,index) in form.dealerButton" :key="index" :class="item.enable ? 'is-enable' : ''">
      <div class="move" style="cursor:move" title="拖动排序"><i style="font-size:12px" class="V7_iconfont V7_iconV7tubiao_yidong"></i></div>
      <el-popover
        placement="top-start"
        width="50"
        trigger="hover">
        <span class="oper-btn" @click.stop="$emit('editBtn', { item, index, type: 'dealerButton' })"><i class="V7_iconfont V7_iconV7tubiao_gerenshezhi-bianji1"></i>编辑</span>
        <div slot="reference" class="name">
          {{item.name}}
        </div>
      </el-popover>
      <i class="el-icon-success" @click.stop="item.enable = !item.enable"></i>
    </div>
  </draggable>

  <div class="title">创建人按钮</div>
  <draggable :list="form.creatorButton" handle=".move"  animation="150" @end="moveEnd"
          @drop.native.stop.prevent="">
      <div class="page-item" v-for="(item,index) in form.creatorButton" :key="index" :class="item.enable ? 'is-enable' : ''">
        <div class="move" style="cursor:move" title="拖动排序"><i style="font-size:12px" class="V7_iconfont V7_iconV7tubiao_yidong"></i></div>
        <el-popover
        placement="top-start"
        width="50"
        trigger="hover">
        <span class="oper-btn" @click.stop="$emit('editBtn', { item, index, type: 'creatorButton' })"><i class="V7_iconfont V7_iconV7tubiao_gerenshezhi-bianji1"></i>编辑</span>
        <div slot="reference" class="name">
          {{item.name}}
        </div>
      </el-popover>
        <i class="el-icon-success" @click.stop="item.enable = !item.enable"></i>
      </div>
  </draggable>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import draggable from 'vuedraggable';
import { CommonModule } from '@/store/modules/common'
import optionalRadioScope from './optionalRadioScope.vue'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
@Component({
  components: {
    draggable,
    optionalRadioScope
  }
})
export default class extends Vue {
  @Prop({ default: [] }) private taskShapeList!: any
  @Prop({ default: [] }) private fields!: any
  @Prop({ default: { assignInfo: '' } }) private form!: any
  private changeAssignType () {
    this.$set(this.form, 'autoAssignCon', 0)
    this.$set(this.form, 'autoAssignType', 0)
    this.$set(this.form, 'assignInfo', '')
    this.$set(this.form, 'flowActivities', [])
    this.$set(this.form, 'defaultAssignee', '')
    if (this.form.assignType === 3) {
      this.form.flowType = 4
    }
  }

  private changeValue (id: string) {
    this.form.assignInfo = id
  }

  private changeFlowType (type) {
    this.form.flowType = type
  }

  private options = Object.freeze([
    {
      label: '跟随工单字段',
      value: 0
    },
    {
      label: '固定处理人',
      value: 1
    },
    {
      label: '节点处理人',
      value: 2
    },
    {
      label: '自动分配',
      value: 3
    }
  ])

  private get fieldsMap () {
    const obj = {}
    this.fields.map(item => {
      obj[item.businessId] = item
    })
    return obj
  }

  private get task () {
    return this.taskShapeList
  }

  private get tabs () {
    return [
      {
        name: '技能组',
        type: 'technology',
        list: (CommonModule as any).publicCache.queueList,
        listMap: (CommonModule as any).publicCache.queueListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '服务组',
        type: 'service',
        list: busConfigStore.serviceList,
        listMap: busConfigStore.serviceMap,
        defaultProps: { id: 'id', name: 'name' }
      }
    ]
  }

  private get userList () {
    return (CommonModule as any).publicCache.userList
  }

  private get memberFields () {
    return this.fields.filter(item => {
      return (item.fieldType === 'member' || item.fieldType === 'department') && item.isSystem === 0
    })
  }

  private changeField () {
    let flowType = 1
    if (this.fieldsMap[this.form.assignInfo] && this.fieldsMap[this.form.assignInfo].fieldType === 'department') {
      flowType = this.fieldsMap[this.form.assignInfo].dataType
    }
    this.form.flowType = flowType
  }
}
</script>
<style scoped lang="stylus">
.margin-t-10 {
  margin-top: 10px
}
.tip {
  color: rgba(0,0,0,0.6);
  margin: 8px 0px;
}
.oper-btn {
  cursor pointer
  .V7_iconfont {
    color: #B3B9C7
    font-size 14px
    margin-right: 6px
  }
}
.page-item
  line-height: 32px;
  display: flex;
  width: 300px;
  border: 1px solid #E7E9ED;
  border-radius: 4px;
  align-items: center;
  padding: 0px 12px;
  margin-bottom: 12px;
  justify-content: space-between;
  .name
    font-weight: 400;
    color: #303753;
    width 200px
    padding-left: 20px
    text-align: left
    cursor pointer
    position: relative;
.handle-config {
  padding: 0px 24px 50px 24px;
}
.title {
  font-weight: 400;
  color: #303753;
  margin-bottom: 12px
  margin-top: 24px
}
.el-icon-success {
  color: #DCDFE6;
  font-size: 14px;
  cursor pointer
}
.is-enable
  border 1px solid #008BEE
  .name
  .el-icon-success
    color: #008BEE
.V7_iconV7tubiao_yidong {
  color: #B3B9C7;
}
</style>
